<template>
  <div class="store">
    <!-- 头部标题 -->
    <div class="store-header">
      <div class="store-header-tt">门店列表</div>
      <div class="store-header-add" @click="goStoreAdd">新增<span class="iconfont icon-tianjia1 icon"></span></div>
    </div>

    <!-- 门店列表 -->
    <div class="store-main">
      <ul id="storeList" class="store-list">
        <li class="list-item" v-for="(item,index) in tableData" :key="index">
          <div class="list-item-l">
            <div class="list-col store-img">
              <img src="./images/user-logo.png">
            </div>
            <div class="list-col store-name">
              <div class="store-name-tt">{{item.storeName}}</div>
              <div class="store-location">{{item.storeLocation}}</div>
            </div>
          </div>
          <div class="list-item-r store-opera" @click="showMask(item.storeId)">
            <div>详情<span class="iconfont icon-youjiantou"></span></div>
          </div>
        </li>
      </ul>
      <Pagination :pageNo="pageNo" :pageSize="pageSize" :showPageNo="3" :total="storeInfo.length" @listData="listData"/>
    </div>

    <!-- 订单详情 -->
    <div class="mask">
      <div class="store-data">
        <div class="data-header">
          <div class="fw700">门店详情</div>
          <span class="iconfont icon-shanchu" @click="noShowMask"></span>
        </div>
        <div class="data-col">
          <img src="./images/user-logo.png">
          <div class="ml2">
            <div class="mb2">{{storeDetail.storeName}}</div>
            <div>{{storeDetail.storeLocation}}</div>
          </div>
        </div>
        <div class="data-col">
          <div>联系人：</div>
          <div>{{storeDetail.storeUser}}</div>
        </div>
        <div class="data-col">
          <div>联系电话：</div>
          <div>{{storeDetail.storePhone}}</div>
        </div>
        <div class="data-col">
          <div>登录手机号：</div>
          <div>{{storeDetail.userPhone}}</div>
        </div>
        <div class="data-col">
          <div>登录密码：</div>
          <div>{{storeDetail.userPassword}}</div>
        </div>
        <div class="data-btn">
          <button class="btn" id="dowBtn" @click="goStoreEidt(storeDetail)">编辑信息</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name:'Store',
  props: ['storeInfo'],
  data() {
    return {
      //分页器参数，代表第几页
      pageNo: 1,
      //每页展示产品个数
      pageSize: 6,
      //每页展示的数据
      tableData: [],
    }
  },  
  created(){
    //先剪切第一页的数据
    this.tableData = this.storeInfo.slice((this.pageNo - 1) * this.pageSize,this.pageNo * this.pageSize);
  },
  mounted() {
    //获取门店列表数据
    this.$store.dispatch('getStoreInfo');
    //绑定自定事件时
    this.$bus.$on('listData',this.listData)
  },
  beforeDestroy(){
    //解绑全局事件
    this.$bus.$off('listData');
  },
  methods: {
    goStoreAdd(){
      this.$router.push('/home/storeAdd');
    },
    showMask(storeId) {
      this.$store.dispatch('getStoreDetail',{storeId});
      setTimeout(function(){
	      var oMask = document.querySelector('.mask'); 
        oMask.style.display="block";
      },330)
    },
    noShowMask() {
      var oMask = document.querySelector('.mask'); 
      oMask.style.display="none";
    },
    goStoreEidt(storeDetail) {
      sessionStorage.setItem("STOREDETAIL", JSON.stringify(storeDetail));
      this.$router.push('/home/storeEidt');
    },
    //修改分页器页数
    listData(pageNo) {
      this.pageNo = pageNo;
      this.tableData = this.storeInfo.slice((this.pageNo - 1) * this.pageSize,this.pageNo * this.pageSize);
    }
  },
  computed: {
    ...mapState({
      storeDetail: (state) => state.home.storeDetail || {},
    }),
  }
}
</script>

<style scoped>
  .fw700 {
    font-weight: 700;
  }

  .mb2 {
    margin-bottom: 1.2vh;
  }

  .ml2 {
    margin-left: 2vw;
  }

  .store {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 99%;
    padding-top: 1.6vh;
    padding-left: 3vw;
    padding-right: 3vw;
    background-color: #fff;
    border-radius: 4vw;
  }

  .store .store-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 4vh;
  }

  .store .store-header-tt {
    font-size: 4.5vw;
    font-weight: 700;
  }

  .store .store-header-add {
    display: flex;
    align-items: center;
    color: #409EFF;
  }

  .store .list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1vh;
    border-bottom: .2vh solid #ccc;
  }

  .store .list-item-r {
    color: #409EFF;
    font-size: 3.8vw;
  }

  .store .list-item-l {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .store .store-img {
    padding-left: 1vw;
  }

  .store .store-img>img {
    width: 14vw;
    height: 8vh;
  }

  .store .icon {
    padding-left: .5vw;
    color: #409EFF;
    font-size: 2vw;
  }

  .store .store-name {
    margin-left: 4vw;
    font-size: 3.8vw;
  }

  .store .store-name-tt {
    margin-bottom: 0.5vh;
  }

  .store .store-location {
    color: #909399;
  }

  .mask {
    display: none;
    position: absolute;
    width: 103vw;
    height: 83.2vh;
    left: -3vw;
    top: -1.6vh;
    background-color: rgba(0, 0, 0, .4);
    z-index: 999;
  }

  .mask .store-data {
    box-sizing: border-box;
    position: relative;
    width: 80vw;
    height: 48vh;
    top: 50%;
    left: 50%;
    margin-top: -24vh;
    margin-left: -38.5vw;
    background-color: #fff;
    border-radius: 3vw;
  }

  .mask .data-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 4vw;
    padding: 2vw 4vw 2vw;
    margin-bottom: 1vw;
    border-bottom: .4vw solid #999; 
  }

    .mask .data-col {
    display: flex;
    align-items: center;
    padding: 2vw 4vw 2vw;
    font-size: 4vw;
  }

  .mask .data-col>div:last-child {
    color: #8D8D8D;
  }

  .mask .data-col>img {
    width: 18vw;
    height: auto;
  }

  .mask .data-btn
  {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3vw 4vw 3vw;
    margin-top: 1vw;
    border-top: .4vw solid #999; 
  }

  .mask .btn {
    width: 30vw;
    height: 4vh;
    color: #fff;
    background-color: #118EE9;
    border: 0.4vw solid #118EE9;
    border-radius: 0.8vh;
  }
</style>